<template>
	<div class="upload">
		<el-dialog :visible.sync="dialogVisible" size="tiny">
			<img width="100%" :src="dialogImageUrl" alt="">
		</el-dialog>
		<el-upload ref="upload" :action="action" :file-list="fileList" :before-upload="beforePictureUpload" :on-preview="handlePictureCardPreview" :data="form" :on-remove="handleRemove" :on-success="handleAvatarSuccess" accept="video/*" multiple>
			<i class="el-icon-plus addImage"></i>
		</el-upload>
		<div v-for="vm in fileList">
			<video class="videoContent" :src="vm.url" controls="controls">
				your browser does not support the video tag
			</video>
		</div>
		<div v-for="vm in nameList" v-show="nameList.length <= 4">
			<div class="imgName">{{vm}}</div>
		</div>
	</div>
</template>
<script>
export default {
	name: 'upload',
	data() {
		return {
			id: '',
			isOne: false,
			group: '',
			type: '',
			fileName: '',
			action: '',
			isEdit: true,
			dialogImageUrl: '',
			dialogVisible: false,
			fileList: [],
			fileListSave: 0,
			nameList: [],
			parent: this,
			sIndex: 0,
			uid: '',
			formList: {},
			form: {
				policy: '',
				signature: '',
				expire: '',
				OSSAccessKeyId: '',
				name: '',
				key: '',
				type: '',
				success_action_status: '200', //让服务端返回200,不然，默认会返回204
				callback: ''
			},
			baseUrl: this.$store.state.http
		}
	},
	watch: {
		fileList: function(_cur, _old) {
			if (_cur.length == 0) return;
			this.$nextTick((data) => {
				if (this.isEdit) {
					let deleCardsHave = this.$el.getElementsByClassName('el-upload-list__item-delete');
					for (var i = 0; i < deleCardsHave.length; i++) {
						deleCardsHave[i].style.display = 'inline-block';
					}
				} else {
					let deleCards = this.$el.getElementsByClassName('el-upload-list__item-delete');
					for (var i = 0; i < deleCards.length; i++) {
						deleCards[i].style.display = 'none';
					}
				}
			});
		},
		isEdit: function(_cur, _old) {
			this.$nextTick((data) => {
				if (!_cur) {
					this.$refs.upload.hidePictureCardUpload(this.$el);
				} else {
					$(this.$el).find('.el-upload--picture-card')[0].style.display = 'inline-block';
				}
			});
		},
		deep: true
	},
	methods: {
		handleRemove(file, fileList) {
			if (file && file.name) {
				this.$http.get('/annex/delete/' + file.name).then((data) => {
					this.$message({
						message: '视频删除成功',
						type: 'success'
					});
					this.fileList = fileList;
					this.fileListSave--;
				}).catch((error) => {

				});
			}

		},
		handlePictureCardPreview(file) {
			this.dialogImageUrl = file.url;
			this.dialogVisible = true;
		},
		handleAvatarSuccess(res, file) {
			console.log('this.isOne' + this.isOne);
			if (this.isOne) {
				this.$refs.upload.hidePictureCardUpload(this.$el);
			}
			console.log('form');
			console.log(this);
			this.uid = file.uid;
			this.$http.post("/annex/upload", {
				annexBatchNo: this.id,
				annexGroup: this.group,
				annexType: this.type,
				annexUrl: this.formList[this.uid].key.split('/')[this.form.key.split('/').length - 1],
				fileDisplayName: this.fileName,
				filename: this.formList[this.uid].name,
				format: this.formList[this.uid].type
			}).then((data) => {
				console.log(data);
				file.name = data.data.data.annexId;
				this.fileListSave++;
				this.$message({
					message: '视频上传成功',
					type: 'success'
				});
				this.type = 8;
				this.getUrl(this.form.key.split('/')[1]);
			});
		},
		beforePictureUpload(file) {
			this.uid = file.uid;
			this.formList[this.uid] = {};
			console.log(this.fileList.length);
			console.log(document);
			if (this.isOne && this.fileList.length !== 0) return;
			let xmlhttp = null;
			if (window.XMLHttpRequest) {
				xmlhttp = new XMLHttpRequest();
			} else if (window.ActiveXObject) {
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
			console.log(xmlhttp);
			if (xmlhttp != null) {
				// debugger;
				if (!this.group && this.group != '0') return;
				let serverUrl = this.baseUrl + '/annex/check/' + this.group;
				xmlhttp.open("GET", serverUrl, false);
				xmlhttp.setRequestHeader("x-auth-token", this.$store.state.token);
				xmlhttp.send(null);
				let js = JSON.parse(xmlhttp.responseText);
				let that = this;
				this.action = js.host;
				this.formList[this.uid] = {
					name: file.name,
					type: file.type,
					policy: js.policy,
					signature: js.signature,
					expire: js.expire,
					OSSAccessKeyId: js.accessid,
					key: js.dir + that.randomString(10) + '.' + file.name.split('.')[file.name.split('.').length - 1],
					success_action_status: '200',
					callback: ''
				}
				this.form.name = this.formList[this.uid].name;
				this.form.type = this.formList[this.uid].type;
				this.form.policy = this.formList[this.uid].policy;
				this.form.signature = this.formList[this.uid].signature;
				this.form.expire = this.formList[this.uid].expire;
				this.form.OSSAccessKeyId = this.formList[this.uid].OSSAccessKeyId;
				this.form.key = this.formList[this.uid].key;
			} else {
				this.$message({
					message: 'Your browser does not support XMLHTTP.',
					type: 'warning'
				});
			}
		},
		randomString(len) {　　
			len = len || 32;　　
			let chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';　　
			let maxPos = chars.length;　　
			let pwd = '';　　
			for (let i = 0; i < len; i++) {　　
				pwd += chars.charAt(Math.floor(Math.random() * maxPos));
			}
			console.log(pwd);
			return pwd;
		},
		getFileList(_isEdit, _isAll) {
			console.log(this.type + '-' + this.id + '-' + this.group);
			this.isEdit = _isEdit;
			if (_isEdit == false) {
				this.$refs.upload.hidePictureCardUpload(this.$el);
			}
			if (_isEdit && _isAll != 1) {
				this.$emit('submit-uploadNone');
			}
			let textSortJson = {
				'身份证正面': 0,
				'身份证背面': 1,
				'授权书': 2,
				'授权书面签': 3
			}
			this.$http.get("/annex/getAnnexList/" + this.id + '/' + this.type)
				.then((data) => {
					if (data.data.success) {
						console.log(data);
						let datas = data.data.data,
							isNone = true;
						this.fileList = [];
						let annexIdArr = [];
						console.log('this.fileList' + '----' + this.fileList.length)
						for (let i = 0; i < datas.length; i++) {
							this.fileListSave++;
							if (datas[i].annexGroup == this.group) {
								isNone = false;
								this.$http.get("/annex/url/" + datas[i].annexGroup + '?name=' + datas[i].annexUrl).then((urlData) => {
									if (annexIdArr.join(',').indexOf(datas[i].annexId) == -1) {
										this.fileList.push({
											name: datas[i].annexId,
											url: urlData.data.url,
											sort: textSortJson[datas[i].fileDisplayName],
											fileDisplayName: datas[i].fileDisplayName
										});
										this.fileList.sort(function(a, b) {
											return a.sort - b.sort;
										});
										this.nameList = [];
										for (let i = 0; i < this.fileList.length; i++) {
											this.nameList.push(this.fileList[i].fileDisplayName);
										}
										annexIdArr.push(datas[i].annexId);
									}

									console.log('fileList');
									console.log(this.fileList)
								}).catch((errors) => {

								});
							}
						}
						if (!isNone) {
							this.$emit('submit-uploadNone');
						} else if (_isEdit && _isAll != 1) {
							this.$emit('submit-uploadNone');
						}
					}
				}).catch((error) => {

				});
		},
		getUrl(_annexUrl, _isEdit) {
			this.isEdit = _isEdit;
			if (_isEdit == false) {
				this.$refs.upload.hidePictureCardUpload(this.$el);
			}
			this.$http.get("/annex/url/" + this.type + '?name=' + _annexUrl).then((urlData) => {
				this.fileListSave++;
				this.fileList.push({
					name: _annexUrl,
					url: urlData.data.url
				});
			}).catch((errors) => {

			});
		}
	},
	mounted() {
		this.$http.get('/annex/check/0').then((data) => {
			if (data.status == 200) {
				this.action = data.data.host;
			}
		}).catch((error) => {

		})
	}
}

</script>
<style lang="scss" scoped>
@import '../../assets/css/site.scss';
.upload {
	position: relative;
	.uploadImg {
		position: relative;
		@include clearfix();
	}
	.dialog-img {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}
	.imgName {
		float: left;
		text-align: center;
		width: 146px;
		margin-right: 8px;
	}
	.videoContent {
		float: left;
		width: 200px;
		height: 200px;
	}
	.addImage {
		font-size: 30px;
	}
}

</style>
